<template>
    <div class="model-settings">
        <div class="header">
    
            <div style="background-color: white;border-radius: 20px;">
                <div style="color: #04c1a5;font-size: large;">呼吸模型训练结果展示</div>
                  <div id="myEcharts1" style="width:40vw;height:30vh;margin-top:5vh"></div>
            </div>
        </div>
        <div class="content">
            <el-row align>
                <el-col >
                  <el-descriptions
                  :column="1"
                  :size="size"
                  direction="vertical"
                  >
                  <el-descriptions-item >
                    <el-row justify>
                        <el-col :span="6" style="text-align:center">               
                        </el-col>
                        <el-col :span="6" style="text-align:center">               
                             <el-tag style="font-size: larger;font-weight: 700;background-color:#edf7f6;color:#4CAF50;" >模型名称</el-tag>
                        </el-col>
                        <el-col :span="6" style="text-align:center">
                          <el-select v-model="state" placeholder="请选择用户状态">
                            <el-option
                              v-for="item in stateData"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </el-col>
                    </el-row>
                  </el-descriptions-item>
    
                  </el-descriptions>
                </el-col>  
                <el-col style="text-align: center; margin-top:-1vh;">
                  <el-divider >
                    <div style="font-size:medium;font-weight: 600;">更改模型参数</div>
                  </el-divider>
                </el-col>
                <el-col >
                  <el-descriptions
                  :column="1"
                  :size="size"
                  direction="vertical"
                  >
                  <el-descriptions-item >
                    <el-row justify>
                        <el-col :span="6" style="text-align:center">               
                        </el-col>
                        <el-col :span="6" style="text-align:center;">               
                             <el-tag size="small" style="font-size: larger;font-weight: 700;background-color:#edf7f6;color:#4CAF50;" >算法选择</el-tag>
                        </el-col>
                        <el-col :span="6" style="text-align:center">      
                          <el-select
                            v-model="value"
                            clearable
                            placeholder="Select"
                            style="width: 16vh"
                        >
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                          </el-select>
                        </el-col>
                    </el-row>
                  </el-descriptions-item>
                  <el-descriptions-item >
                    <el-row justify>
                        <el-col :span="6" style="text-align:center">               
                        </el-col>
                        <el-col :span="6" style="text-align:center">               
                             <el-tag size="small" 
                             style="font-size: larger;
                             font-weight: 700;
                             padding: 1vh;
                             background-color:#edf7f6;color:#4CAF50;
                             " >池化层选择</el-tag>
                        </el-col>
                        <el-col :span="6" style="text-align:center">      
                          <el-select
                            v-model="value"
                            clearable
                            placeholder="Select"
                            style="width: 16vh"
                        >
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                          </el-select>
                      </el-col>
                  </el-row>
                  </el-descriptions-item>
                  <el-descriptions-item >
                    <el-row justify>
                        <el-col :span="6" style="text-align:center">               
                        </el-col>
                        <el-col :span="6" style="text-align:center">               
                             <el-tag size="small" style="font-size: larger;font-weight: 700;background-color:#edf7f6;color:#4CAF50;">优化算法选择</el-tag>
                        </el-col>
                        <el-col :span="12" style=""> 
                            <div class="checkbox-group">
                                <el-checkbox-group v-model="selectedModels">
                                <el-checkbox label="Model 1"></el-checkbox>
                                <el-checkbox label="Model 2"></el-checkbox>
                                <el-checkbox label="Model 3"></el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </el-col>
                    </el-row>
                  </el-descriptions-item>
                  <el-descriptions-item >
                    <el-row justify>
                        <el-col :span="6" style="text-align:center">               
                        </el-col>
                        <el-col :span="6" style="text-align:center">               
                             <el-tag size="small" style="font-size: larger;font-weight: 700;background-color:#edf7f6;color:#4CAF50;">xx占比率</el-tag>
                        </el-col>
                        <el-col :span="12" style=""> 
                            <el-row :model="formInline" style="height: 2vh;width: 32vh;display: flex;align-items: center;">
                              <el-col :span="3"></el-col>
                            <el-col :span="9" style="display: flex;align-items: center;justify-content: center;">
                                <el-input size="medium" v-model="formData.rate" placeholder="请输入所属人姓名或手机号"></el-input>
                            </el-col>
                            <el-col :span="12" style="display: flex;">
                                <el-button size="medium" style="background-color:#04c1a5;color:#fff">
                                    <font-awesome-icon icon="fas fa-ban" />
                                <!-- <span style="margin-left:1vh">查询</span> -->
                                </el-button>
                            </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                  </el-descriptions-item>
                </el-descriptions>
                </el-col>  
            </el-row>
        </div>
        <div class="footer">
          <el-button type="success" @click="saveSettings">保存设置</el-button>
        </div>
      </div>
    </template>
    <script setup>
    
    import { ref,reactive,getCurrentInstance,nextTick,toRefs,onMounted,onUnmounted } from 'vue'
    const{proxy}=getCurrentInstance();
    const selectedModels = ref([])
    const showParameter1 = ref(false)
    const showParameter2 = ref(false)
    const showParameter3 = ref(false)
    const state=ref("xx神经网络模型1")
    import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
    const stateData = ref([
      { label: "xx神经网络模型1", value: "1" },
      { label: "xx神经网络模型2", value: "2" },
    ])
    
    const formData= ref({
        rate: 0.01,
    })
    const saveSettings = () => {}
    
    const value = ref('')
    const options = [
      {
        value: 'Option1',
        label: 'Option1',
      },
      {
        value: 'Option2',
        label: 'Option2',
      },
      {
        value: 'Option3',
        label: 'Option3',
      },
      {
        value: 'Option4',
        label: 'Option4',
      },
      {
        value: 'Option5',
        label: 'Option5',
      },
    ]
    import * as echarts from "echarts";
    const snoreComment = ref('')
    const width = ref("20vh");
    const height = ref("20vh");
    const chartInstance = ref(null);
    const queryInfo = reactive({
          query: '', // 查询参数
          pagenum: 1, // 当前页码
          pagesize: 2 // 每页显示条数
        });
// 初始化图表
const initChart = () => {
  // 基于准备好的dom，初始化echarts实例
  chartInstance.value = echarts.init(
      document.getElementById("myEcharts1"),
      "wonderland"
  );

  const data = [
    {time: '09:30', value: 100},
    {time: '10:00', value: 120},
    {time: '10:30', value: 150},
    // 其他时间数据...
  ];

  chartInstance.value.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      top: '5%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['Epoch 1', 'Epoch 2', 'Epoch 3', 'Epoch 4', 'Epoch 5', 'Epoch 6', 'Epoch 7', 'Epoch 8', 'Epoch 9'],  // 替换为训练模型的 Epoch 数据
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false
      }
    },
    series: [{
      type: 'line',
      smooth: true,
      data: [0.8, 0.85, 0.9, 0.88, 0.92, 0.78, 0.86, 0.88, 0.95]  // 替换为和鼾声训练模型效果有关的数据（例如准确率、损失等）
    }]
  });

  // 大小自适应窗口大小变化
  window.onresize = () => {
    chartInstance.value.resize();
  };
};
    onMounted(() => {
      initChart();
      // formData.state = StatusOptions[0]
    });
    onUnmounted(() => {
      // 销毁图表
      if (chartInstance.value) {
        chartInstance.value.dispose();
      }
    });
    </script>
    <style scoped>
    
    .model-settings {
      max-width: 800px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 20px;
      border: 1px solid #ccc;
    }
    
    .content {
        background-color: white;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin-bottom: 20px;
    }
    
    .checkbox-group {
      /* margin-bottom: 20px; */
    }
    
    .parameters h4 {
      margin-bottom: 10px;
    }
    
    .footer {
      text-align: right;
    }
    </style>